<template>
    <view class="box_p" @click="go()" hover-class="uni-list-cell-hover">
        <view class="imgContent" :style="{ background: bgColor }">
			<van-icon :name="icon" class-prefix="cpis-icon" :color="iconColor" size="24px"/>
        </view>
        <view class="title">{{ name }}</view>
    </view>
</template>

<script>
export default {
    props: {
        icon: String,
        bgColor: String,
		iconColor: String,
        name: String,
        url: String,
        size: Number
    },
    data() {
        return {}
    },
    methods: {
        go() {
            if (this.url) {
                uni.navigateTo({
                    url: this.url
                })
            }
        }
    }
}
</script>

<style lang="scss">
	.box_p {
		box-sizing: border-box;
		text-align: center;
		margin: 20upx 0;
		width: 187.5upx;
	}

	.imgContent {
		width: 88upx;
		height: 88upx;
		padding: 4upx;
		border-radius: 28upx;
		margin: 0 auto;
	}

	.box_p .title {
		margin-top: 4upx;
		font-size: 0.67rem;
		color: $uni-color-subtitle;
	}
</style>
